<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="100"></el-table-column>
        <el-table-column prop="inboundId" label="Inbound ID" width="180"></el-table-column>
        <el-table-column prop="inboundOrder" label="Inbound Order" width="180"></el-table-column>
        <el-table-column
            prop="status"
            label="Status"
            width="120"
            >
            <template #default="a">
                <div :class="setStatusClass(a.row.status)">
                  {{formatStatus(a.row) }}
                </div>
              </template>
        </el-table-column>
        <!-- :formatter="formatStatus"
            :cell-style="statusCellStyle" -->
    </el-table>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
const setStatusClass = (status) => {
  if (status === 2||status === 3) {
    
    return "yellow";
  }  else if(status === 1) {
    return "green";
  }
};
const tableData = ref([]);

let websocket;

function initWebSocket() {
    // 更换为你的 WebSocket 服务地址
    websocket = new WebSocket('ws://localhost:9090/vehicle');
    const token = sessionStorage.getItem("token");
    // websocket = new WebSocket('ws://172.20.10.8:9090/vehicle',['protocol'],{headers:{
    //     'token': token
    //     }});
    // websocket.addEventListener('open', (event) => {
    //     // 在握手阶段添加Authorization头
    //     console.log("111111");
    //     websocket.send('token: ' + sessionStorage.getItem("token"));
    // });

    websocket.onmessage = function(event) {
        try {
            const data = JSON.parse(event.data);
            console.log(event.data);
            // 更新数据前处理每个对象
            tableData.value = data.map(item => ({
                id: item.id,
                inboundId: (item.status === 1 ? 'N/A' : item.inboundId || 'N/A'), // 如果status为1，不管有无inboundId，显示'N/A'
                inboundOrder: (item.status === 1 ? 'N/A' : item.inboundOrder || 'N/A'), // 如果status为1，不管有无inboundOrder，显示'N/A'
                status: item.status
            }));
        } catch (error) {
            console.error('Error parsing JSON:', error);
        }
    };

    websocket.onerror = function(event) {
        console.error('WebSocket error observed:', event);
    };

    websocket.onclose = function(event) {
        console.log('WebSocket is closed now.');
    };

    websocket.onopen = function(event) {
        console.log('WebSocket connection successfully opened');
    };
}

function formatStatus(row) {
    switch (row.status) {
        case 1:
            return '空闲';
        case 2:
            return '运输中';
        case 3:
            return '返回';
        default:
            return '未知';
    }
}

function statusCellStyle({ row, column, rowIndex, columnIndex }) {
    switch (row.status) {
        case 1:
            return { color: 'green' };
        case 2:
            return { color: 'yellow' };
        case 3:
            return { color: 'yellow' };
        default:
            return {};
    }
}

onMounted(() => {
    initWebSocket();
});

onUnmounted(() => {
    if (websocket) {
        websocket.close();
    }
});
</script>

<style scoped>
/*
/* 这里可以添加一些表格的自定义样式 */
body {
    background-color: #f5f5f5; /* 设定背景颜色为浅灰色 */
    font-family: Arial, sans-serif; /* 设置全局字体 */
}
.yellow{
    background-color:yellow;
    color:#151212;
    text-align: center;
}
.green{
    background-color:green;
    color:#f5f5f5;
    text-align: center;
}
.el-table {
    border-radius: 8px; /* 给表格添加圆角 */
    box-shadow: 0 2px 12px rgba(0,0,0,0.1); /* 添加轻微的阴影，让表格更有层次感 */
    margin: 20px auto; /* 增加外边距，使表格在页面中更加居中 */
    background-color: white; /* 设置表格背景为白色 */
    max-width: 960px; /* 限制表格的最大宽度 */
}

.el-table th {
    background-color: #fafafa; /* 给表头添加特定的背景颜色 */
    color: #333; /* 设置表头字体颜色为深灰色 */
    font-weight: bold; /* 表头字体加粗 */
}

.el-table-column--selection .cell,
.el-table-column--index .cell {
    text-align: center; /* 使复选框和索引列的文本居中显示 */
}

.el-table-column {
    text-align: left; /* 设置表格列内容左对齐 */
}

/* 单独样式调整 */
.status-cell {
    color: white; /* 状态列的文字颜色设置为白色 */
    font-weight: bold; /* 状态列的文字加粗 */
    text-align: center; /* 状态列文字居中显示 */
}
</style>
